<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>源码大数据-API首页</title>
		<!-- 1.引入重置样式表 -->
		<link rel="stylesheet" href="./css/normalize.css" />
		<!-- 2.引入自定义重置样式表 -->
		<link rel="stylesheet" href="./css/reset.css" />
		<!-- 3.引入公共样式 -->
		<link rel="stylesheet" href="./css/common.css" />
		<link rel="stylesheet" href="./css/api-detail.css" />
	</head>
	<body>
	
		<!-- 头部区 -->
		<section id="header">
			<header class="abs flex-c-sb b-box">
				<!-- logo -->
				<!-- 1.直接使用img -->
				<!-- 2.使用h相关标签，再包一个a标签，使用backgorund-img来加logo，a标签里写上对应的内容（需要隐藏） -->
				<h2>
					<a href="#">源码大数据logo</a>
				</h2>
				<!-- 导航 -->
				<ul class="flex-c-c fc-gray fz-14">
					<li>首页</li>
					<li class="active">API</li>
					<li>案例</li>
					<li>云服务</li>
					<li>开发者</li>
				</ul>
				<!-- 按钮 -->
				<div class="flex-c-c fz-12">
					<span class="fc-gray">登录</span>
					<span class="fc-white">注册有礼</span>
				</div>
			</header>
		</section>
		<!-- 主体 -->
		<main>
			<!-- banner区 -->
			<section id="banner" class="rel">
				<div id="bannerBg" class="abs"></div>
				<div class="container">
					<div id="bannerCont">
						<div id="bannerLt">
							<!-- 图片 -->
							<img src="./imgs/API_04.jpg" alt="图片已损坏" />
							<!-- 按钮区 -->
							<ul class="flex-c-sb">
								<li>
									<img
										src="./imgs/API详情页_smallicon_01.jpg"
										alt="图片已损坏"
									/>
									<p>103</p>
								</li>
								<li>
									<img
										src="./imgs/API详情页_smallicon_02.jpg"
										alt="图片已损坏"
									/>
									<p>5897</p>
								</li>
								<li>
									<img
										src="./imgs/API详情页_smallicon_03.jpg"
										alt="图片已损坏"
									/>
									<p>12</p>
								</li>
							</ul>
						</div>
						<div id="bannerRt">
							<!-- 标题 -->
							<h1>
								身份证实名认证&nbsp;
								<span>支持HTTPS</span>
								<span>企业专业</span>
							</h1>
							<!-- 图标 -->
							<ul id="iconList">
								<li>
									<img src="./imgs/API详情页_03.jpg" alt="图片已损坏" />
									&nbsp限企业实名用户使用
								</li>
								<li>
									<img src="./imgs/API详情页_08.jpg" alt="图片已损坏" />
									&nbsp;限企业实名用户使用
								</li>
								<li>
									<img src="./imgs/API详情页_05.jpg" alt="图片已损坏" />
									&nbsp限企业实名用户使用
								</li>
							</ul>
							<!-- 段落 -->
							<p id="bannerRtText">检测姓名和身份证号是否一致，身份证验证</p>
							<!-- TAB -->
							<ul id="tabList">
								<li class="rel default">
									<img src="./imgs/API17.jpg" alt="图片已损坏" />
									<p>&nbsp;扫码测试</p>
									<div id="QRCode" class="abs">
										<img src="./imgs/wechat-white.png" alt="图片已损坏" />
										<p>扫码关注我</p>
									</div>
								</li>
							</ul>
							<!-- 价格 -->
							<p id="bannerRtPrice">
								<span>&yen;1200</span>
								（约0.3000元/次），仅限企业实名购买；
							</p>
							<!-- 按钮 -->
							<a href="#">立即申请</a>
						</div>
						
					</div>
				</div>
			
			</section>
			<!-- 选项卡内容区 -->
			<section id="detailCont">
				<div class="container">
					<!-- TAB -->
					<ul id="detailContList">
						<li class="active">API文档</li>
						<li>错误码参照</li>
						<li>示例代码</li>
						<li>联系我们</li>
					</ul>
					<!-- 内容 -->
					<div id="detailContBox">
						<div>1</div>
						<div>2</div>
						<div>3</div>
						<div>4</div>
					</div>
				</div>
			</section>
		</main>
		<!-- 页脚区 -->
		<footer></footer>

		<!-- 1.引入工具js -->
		<script src="./js/util.js"></script>
		<!-- 2.引入粒子效果插件JS -->
		<script type="text/javascript" src="./lib/canvas-particle.js"></script>
		<!-- 3.引入当前页样式 -->
		<script src="./js/api-detail.js"></script>
		<script>
			window.onload = function () {
				//配置
				var config = {
					vx: 4, //点x轴速度,正为右，负为左
					vy: 4, //点y轴速度
					height: 2, //点高宽，其实为正方形，所以不宜太大
					width: 2,
					count: 150, //点个数
					color: "#666", //点颜色
					stroke: "#ccc", //线条颜色
					dist: 6000, //点吸附距离
					e_dist: 20000, //鼠标吸附加速距离
					max_conn: 10, //点到点最大连接数
				};
				//调用
				CanvasParticle(config);
			};
		</script>
	</body>
</html>
